<template>
  <div>
    <div id="app"><img src="../assets/suolong.jpg" width="20%"></div>
    <div>导入说明：</div>
    <div>1.单表的数据大小越小越好，2000条内为佳。</div>
    <div>2.2000条数据导入时间大概为1分半左右。</div>
    <!-- <div>3.导入后单位的二维码生成有延迟，大概10分钟左右，视每次导入的数据量大小。</div> -->
    <div>3.每次导入的数据会按照单位编码去重。</div>
    <div>4.相同单位编码的数据，以最后导入的数据为准。</div>
    <div style="height:1rem;"></div>
    <input
      name="file"
      type="file"
      accept=".xls, .xlsx"
      ref="fileInput"
      @change="onFileSelected"
      hidden
    >

    <el-button @click="$refs.fileInput.click()">点击选择 Excel 文件 {{ previewFile && previewFile.name}}</el-button>
    
    <el-button type="primary" v-if="previewFile" @click="uploadFile" :loading="loading">提交预览</el-button>
    <div slot="filters">
        <el-button
          type="primary"
          @click="importData"
          v-if="previewList && previewList.length"
          :loading="importing"
        >确认导入以下{{previewList.length}}条数据</el-button>
      </div>
    <!-- <List
      :header="tableHeader"
      :data="tableData"
      :title="title"
      :disableAction="true"
      v-if="previewList && previewList.length"
    > -->
         <el-table v-if="previewList && previewList.length" :data="previewList" style="width: 100%;" align="center">
            <el-table-column prop="username" label="名字" width="200" align="center"/>
            <el-table-column prop="password" label="密码" width="200" align="center"/>
        </el-table>
      
    <!-- </List> -->
  </div>
</template>
<script>
import { Message } from "element-ui";
import qs from "qs";
export default {
  props: ["type"],
  data() {
    return {
      addDialog: false,
      showReview: false,
      loading: false,
      listData: [],
      pageInfo: {},
      importing: false,
      previewFile: null,
      previewList: []
    };
  },
  created() {
    this.userId = this.$route.query.user;
    this.managerId = this.$route.query.manager;
    this.title = this.$route.query.name;
  },
  watch: {
    addDialog(val) {
      if (!val) {
        this.currentItem = {};
      }
    }
  },
  methods: {
    onFileSelected(e) {
      let file = e.target.files[0];
      if (!file) {
        return;
      }
      this.previewFile = file;
      console.log(file);
    },
    uploadFile() {
      let form = new FormData();
      let vm = this;
      form.append("file", this.previewFile);
      const config = {
        timeout:0,
        onUploadProgress: function(progressEvent) {
          var percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          vm.uploadProgress = percentCompleted;
        }
      };
      this.loading = true;
      this.axios.post("/user/import/preview", form,config)
        .then(it => {
          vm.loading = false;
          vm.$refs.fileInput.value = "";
          vm.previewFile = null;
          vm.previewList = it.data.data;
        //   console.log("it: ",it);
        })
        .catch(it => {
          vm.loading = false;
          Message({
            message: it,
            type: "success",
            duration: 1 * 1000
          });
        });
    },
    importData() {
      let vm = this;
      vm.importing = true;
      this.axios.post("/user/import", this.previewList, { timeout: 0 })
        .then(it => {
            // console.log("it",it);
        vm.importing = false;
        vm.previewList = [];
        if(it.data.code===200){
            let msg = "导入"+it.data.data+"条数据成功"
            Message({
                message: msg,
                type: "success",
                duration: 2 * 1000
            });
        }else{
             Message({
                message: it.data.message,
                type: "info",
                duration: 2 * 1000
            });
        }
        })
        .catch(it => {
          vm.importing = false;
          Message({
            message: it,
            type: "success",
            duration: 1 * 1000
          });
        });
    }
  },
  computed: {
    statusList() {},
    tableData() {
      return this.previewList;
    },
    tableHeader() {
      return [
        {
          key: "username",
          name: "账号"
        },
        {
          key: "password",
          name: "密码"
        }
      ];
    }
  }
};
</script>
<style scoped>
.detail-table {
  border-collapse: collapse;
}
.detail-table,
.detail-table td,
.detail-table th,
.detail-table tr {
  border: solid 1px lightgrey;
}

.detail-table img {
  max-width: 10em;
  height: auto;
}
.detail-table .title {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  padding-right: 10px;
  font-weight: bolder;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}
</style>


